<template>
	<view class="case">
		<block v-if="show">
			<!-- <view class="case-nav">
				<u-navbar title="案例" :is-back="true" title-color="#000000"></u-navbar>
			</view> -->
			<view class="case-tabs">
				<u-tabs 
					:list="caseSort"
					:current="caseIndex" 
					active-color="#141414" 
					name="style_name"
					font-size="28"
					inactive-color="#757575"
					@change="changeCaseTab">
				</u-tabs>
			</view>
			<view :style="{paddingTop: '80rpx'}">
				<view class="case-list" style="padding-bottom: 30rpx;">
					<!-- #ifdef MP -->
					<pt-case :list="caseList" name="case_name" @goInfo="goVrInfo"></pt-case>
					<!-- #endif -->
					<!-- #ifdef H5 || APP-PLUS -->
					<pt-case :list="caseList" name="vr_name" @goInfo="goVrInfo"></pt-case>
					<!-- #endif -->
				</view>
				<pt-nothing 
					text="暂无案例" 
					:fixed="true" 
					v-if="!caseList.length && noCaseMore" 
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
				</pt-nothing>
				<pt-loading-more v-if="isLoading"></pt-loading-more>
				<pt-nomore v-if="noCaseMore"></pt-nomore>
			</view>
		</block>
		<!-- <u-tabbar :list="tabbarList" :icon-size="44"></u-tabbar> -->
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showHome: false,
				tabbarList: [],
				caseNavHeight: 0,
				statusBarHeight: 0,
				caseSort: [],
				caseStyleId: '',
				caseIndex: 0,
				caseList: [],
				casePage: 0,
				isLoading: false,
				noCaseMore: false,
				Refresh: false,
				parent_id: '',
				// 足迹参数
				is_shelf: false,
				addFootParam: {
					start_time: '',
					end_time: '',
					stay_time: 0
				}
			};
		},
		onPullDownRefresh() {
			this.Refresh = true
			// this.show = false
			this.casePage = 0
			this.noCaseMore = false
			this.caseList = []
			setTimeout(() => {
				// #ifdef H5 || APP-PLUS
				this.getCase()
				// #endif
				// #ifdef MP
				this.init()
				// #endif
				this.getHome()
			},500)
		},
		onLoad(options) {
			if(options.is_shelf){
				this.is_shelf = options.is_shelf
			}
			if(options.parent_id){
				this.parent_id = options.parent_id
				uni.setStorageSync('parent_id',options.parent_id)
				// 如果用户从分享的小程序卡片点击进来的,设置一个url缓存,登录后返回当前缓存url
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				uni.setStorageSync('newurl',curPage.$page.fullPath)
				this.$u.api.binding_refer({id: options.parent_id}).catch(() => {
					console.log('接口报错：绑定失败')
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '绑定失败'
					// })
				})
			}
			// #ifdef H5 || APP-PLUS
			this.getCase()
			// #endif
			// #ifdef MP
			this.init()
			// #endif
		},
		onShow() {
			this.getHome()
			if(!this.show){
				// #ifdef H5 || APP-PLUS
				this.getCase()
				// #endif
				// #ifdef MP
				this.init()
				// #endif
			}
			setTimeout(() => {
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: ''
				})
			},200)
			// 解决部分机型点击分享卡片进入不会重新执行绑定的问题
			if(this.parent_id){
				this.$u.api.binding_refer({id: this.parent_id}).catch(() => {
					console.log('接口报错：绑定失败')
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '绑定失败'
					// })
				})
			}
		},
		onReady() {
			if(uni.getStorageSync('tabbarIcons')){
				if(uni.getStorageSync('tabbarIcons').img4){
					this.tabbarList[3].selectedIconPath = uni.getStorageSync('tabbarIcons').img4
				}
			}
		},
		methods: {
			getHome(){
				// 获取是否显示商户主页
				if(uni.getStorageSync('userInfo')){
					// #ifdef MP-WEIXIN
					if(uni.getExtConfigSync().appid==='wx9f2da8a90bb750f7'){
						this.tabbarList = getApp().globalData.arrowMerchantMenu
					}else{
						this.tabbarList = getApp().globalData.merchantMenu
					}
					// #endif
					// #ifdef APP-PLUS || H5
					this.tabbarList = getApp().globalData.merchantMenu
					// #endif
					this.$u.api.ShowHome().then(res => {
						let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
						if(userInfo.store_id!=res.datas.store_id){
							userInfo.store_id = res.datas.store_id
						}
						if(userInfo.store_name!==res.datas.store_name){
							userInfo.store_name = res.datas.store_name
						}
						uni.setStorageSync('userInfo',JSON.stringify(userInfo))
					})
					this.$u.api.UserNoticeCount().then(res => {
						if(res.datas){
							this.$set(this.tabbarList[this.tabbarList.length-1],'count',res.datas)
						}else{
							this.$set(this.tabbarList[this.tabbarList.length-1],'count',res.datas)
						}
					})
				}else{
					// #ifdef MP-WEIXIN
					if(uni.getExtConfigSync().appid==='wx9f2da8a90bb750f7'){
						this.tabbarList = getApp().globalData.arrowDefaultMenu
					}else{
						this.tabbarList = getApp().globalData.defaultMenu
					}
					// #endif
					// #ifdef APP-PLUS || H5
					this.tabbarList = getApp().globalData.defaultMenu
					// #endif
				}
			},
			init(){
				this.$u.api.ExampleCaseList({page: this.casePage,style_id: this.caseStyleId,order_by: 'add_time', asc: 2}).then(res => {
					this.show = true
					this.isLoading = false
					let user_id = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).user_id:0
					this.$u.mpShare = {
						title: '案例欣赏',
						path: '/pages/case/case?parent_id=' + user_id,
					}
					if(!this.caseSort.length){
						this.caseSort = res.datas.style_list
					}
					if(res.datas.list.length){
						res.datas.list.forEach(item => {
							this.caseList.push(item)
						})
					}else{
						this.noCaseMore = true
					}
				}).then(() => {
					this.$nextTick(() => {
						this.getCaseNavHeight()
					})
					if(this.Refresh){
						this.Refresh = false
						uni.stopPullDownRefresh({
							success: () => {
								uni.showToast({
									icon: 'none',
									title: '刷新成功'
								})
							}
						})
					}
				})
			},
			getCase(){
				this.$u.api.VrList({page: this.casePage,style_id: this.caseStyleId}).then(res => {
					this.show = true
					this.isLoading = false
					let user_id = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).user_id:0
					this.$u.mpShare = {
						title: '案例欣赏',
						path: '/pages/case/case?parent_id=' + user_id,
					}
					if(!this.caseSort.length){
						this.caseSort = res.datas.style_list
					}
					if(res.datas.list.length){
						res.datas.list.forEach(item => {
							this.caseList.push(item)
						})
					}else{
						this.noCaseMore = true
					}
				}).then(() => {
					this.$nextTick(() => {
						this.getCaseNavHeight()
					})
					if(this.Refresh){
						this.Refresh = false
						uni.stopPullDownRefresh({
							success: () => {
								uni.showToast({
									icon: 'none',
									title: '刷新成功'
								})
							}
						})
					}
				})
			},
			getCaseNavHeight(){
				this.$nextTick(() => {
					uni.createSelectorQuery().in(this).select('.case-nav').boundingClientRect(res => {
						this.caseNavHeight = res.height
						this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
					}).exec()
				})
			},
			goVrInfo(e){
				// #ifdef H5 || APP-PLUS
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/vr-info/vr-info?vr_id='+ e
				})
				// #endif
				// #ifdef MP
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/case-list/case-details/case-details?case_id='+e
				})
				// #endif
				if(this.is_shelf){
					// #ifdef H5 || APP-PLUS
					this.addFoot('首页-货架-VR推荐-详情')
					// #endif
					// #ifdef MP
					this.addFoot('首页-货架-案例推荐-详情')
					// #endif
				}
			},
			changeCaseTab(e){
				// #ifdef H5 || APP-PLUS
				this.caseStyleId = this.caseSort[e].style_id?this.caseSort[e].style_id:''
				this.caseIndex = e
				this.caseList = []
				this.casePage = 0
				this.noCaseMore = false
				this.getCase()
				// #endif
				// #ifdef MP
				this.caseStyleId = this.caseSort[e].style_id?this.caseSort[e].style_id:''
				this.caseIndex = e
				this.caseList = []
				this.casePage = 0
				this.noCaseMore = false
				this.init()
				// #endif
			},
			// 足迹
			addFoot(where){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: this.addFootParam.stay_time,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1
				})
			}
		},
		onReachBottom() {
			if(!this.noCaseMore){
				this.isLoading = true
				this.casePage++
				// #ifdef H5 || APP-PLUS
				this.getCase()
				// #endif
				// #ifdef MP
				this.init()
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.case{
		.case-tabs{
			border-bottom: solid 2rpx #F4F4F4;
			position: fixed;
			left: 0;
			right: 0;
			background-color: #FFF;
			z-index: 10;
		}
	}
</style>
